<template>
  <div class="product-all-gallery">
    <div class="row">
      <template
        v-for="(item, index) in featuredProductListReactive"
        :key="index"
      >
        <div
          class="col-sm-6 col-lg-3 pb-30 product-all-item"
          style="display: block"
        >
          <div class="product-card-two product-card-two-secondcolor">
            <div class="product-card-thumb">
              <a href="javascript:;">
                <img
                  :src="require('assets/images/products/product-9.png')"
                  alt="product"
                />
              </a>
              <ul class="product-card-action">
                <li>
                  <a href="javascript:;" @click="addCart(item, 1)">
                    <i class="flaticon-shopping-cart"></i>
                  </a>
                </li>
                <li>
                  <a
                    href="javascript:;"
                    class="quick-view-trigger"
                    @click="jumpSingleShop(item)"
                  >
                    <i class="flaticon-visibility"></i>
                  </a>
                </li>
                <li>
                  <a href="javascript:;" @click="addWish(item, 1)">
                    <i class="flaticon-like"></i>
                  </a>
                </li>
              </ul>
            </div>
            <div class="product-card-content">
              <h3>
                <a href="javascript:;">{{ item.title }}</a>
              </h3>
              <p class="product-id">{{ item.code }}</p>
              <div class="product-price">
                {{ item.currentPrice }} <del>{{ item.originalPrice }}</del>
              </div>
            </div>
            <div class="product-status product-status-purple">Best Seller</div>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script setup>
import { featuredProductList } from "src/mockjs";

import { useShopStore } from "src/stores/shop";
const shopStore = useShopStore();

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  defineComponent,
} from "vue";

// const Component = defineComponent({});

const { proxy } = getCurrentInstance();

const props = defineProps({});

const data = reactive({
  featuredProductListReactive: featuredProductList.data.slice(0, 8),
});
const { featuredProductListReactive } = toRefs(data);

onBeforeMount(() => {});
onMounted(() => {});

const jumpSingleShop = (item) => {
  proxy.$router.push({
    name: "ShopSingle",
    params: { product: JSON.stringify(item) },
  });
};

const addCart = (product, quantity) => {
  var newProduct = {
    ...product,
    quantity: quantity,
  };
  shopStore.addCart(newProduct);
};

const addWish = (product, quantity) => {
  var newProduct = {
    ...product,
    quantity: quantity,
  };
  shopStore.addWish(newProduct);
};
</script>
<style lang="scss" scoped></style>
